<template>
    <div class="qilin-vue3">
        <QilinExplain title="设置具名组件的两种方式" date="2023-09-21">
            <template v-slot:content>
                <div style="padding-bottom:10px;">
                    <p>1、在vue单文件组件中设置两个script，在其中一个script中使用defineComponent的方式设置</p>
                    <p>2、使用插件vite-plugin-vue-setup-extend设置</p>
                    <p>3、使用vue3.3新特性defineOptions</p>
                </div>
                <CodeMirror :codeValue="getCodeValue1"></CodeMirror>
            </template>
        </QilinExplain>
    </div>
</template>

<script setup>

/*
    数据变量定义区域
*/


/*
    计算属性等代码区域
*/
// 设置具名组件的两种方式的逻辑代码
const getCodeValue1=computed(()=>{
    return `
        // 第一种方式写法
        // --***.vue
        <script>
            import {defineComponent} from "vue";
            export default defineComponent({
                name:"EDGQilin"
            });
        </-script>
        <script setup>
            ......
        </-script>
        // 第二种方式写法
        // npm i vite-plugin-vue-setup-extend -D
        // --vite.config.js
        import {defineConfig} from "vite";
        import VueSetupExtend from "vite-plugin-vue-setup-extend";
        export default defineConfig({
            ......
            plugins:[ VueSetupExtend() ]
            ......
        });
        // --***.vue
        <script setup name="EDGQilin">
            ......
        </-script>
        // 第三种写法
        // --***.vue
        <script setup>
            import {defineOptions} from "vue";
            defineOptions({
                name:"EDGQilin"
            });
        </-script>
        /*
            注释：script标签放上去会显示报错，因此前面加个-以代替，不必代入真实项目；
        */
    `;
});


/*
    逻辑脚本代码区域
*/


/*
    生命周期代码区域
*/

</script>

<style lang="scss" scoped>

</style>

